<template>
	<view class="acount-login-wrap full box relative p-safe">
		<view class="form-contaienr">
			<view class="app-logo">
				<image src="/static/apple.png" class="logo"></image>
			</view>
			<view class="form-wrap">
				<view class="form-item">
					<input class="input" type="number" placeholder="请输入手机号" v-model="mobile" />
				</view>
				<view class="form-item">
					<input class="input" type="password" placeholder="请输入密码" v-model="password" />
				</view>
				<view class="form-item" v-if="isRegister">
					<input class="input" type="password" placeholder="请确认密码" v-model="confirmPassword" />
				</view>
				<view class="form-item" v-if="isRegister">
					<input class="input" placeholder="请输入验证码" v-model="code" />
					<view class="sms-btn" @click="sendSms">
						<view class="text">
							<text>{{ codeTip }}</text>
						</view>
					</view>
				</view>
				<view class="button-wrap">
					<u-button :loading="loading" :text="btnTitle" @click="loginHandle" loadingMode="spinner"
						type="primary" />
				</view>
			</view>
		</view>
		<u-code :seconds="seconds" change-text="Xs" ref="uCode" @change="codeChange"></u-code>
		<view class="footer-wrap">
			<u-checkbox-group>
				<u-checkbox @change="onChange" v-model="checked" shape="circle" />
			</u-checkbox-group>
			<view class="sercice">
				<text>登录即表示你同意隐私政策</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		methods: {
			onChange(ev) {
				this.checked = ev
			},
			codeChange(text) {
				this.codeTip = text
			},
			onLogin() {

			},
			async registerHandle() {

			},
			async loginHandle() {

			},
			validate() {
				if (!this.checked) return this.$toast({ title: '请勾选隐私政策' })
				const { mobile, password } = this
				if (!mobile.length) return this.$toast({ title: '请输入手机号' })
				if (!uni.$u.test.mobile(mobile)) return this.$toast({ title: '请输入正确的手机号' })
				if (!password.length) return this.$toast({ title: '请输入密码' })
				const payload = {
					account: mobile,
					scene: 1,
					password,
					channel: this.platform,
				}
				if (!this.isRegister) {
					payload.terminal = this.platform
					return payload
				}
				const { confirmPassword, code } = this
				if (!confirmPassword.length) return this.$toast({ title: '请再次输入密码' })
				if (password !== confirmPassword) return this.$toast({ title: '两次密码不一致' })
				if (!code.length) return this.$toast({ title: '请输入验证码' })
				return {
					...payload,
					password_confirm: confirmPassword,
					code,
					scene: 2,
				}
			},
		},
		computed: {},
		data() {
			return {
				isRegister: false,
				mobile: '17638237059',
				password: '',
				code: '',
				confirmPassword: '',
				checked: false,
				loading: false,
				seconds: 10,
				codeTip: '获取验证码',
				btnTitle: '登录',
			}
		}
	}
</script>

<style lang="scss" scoped>
	.acount-login-wrap {
		padding-top: 126rpx;


		.form-contaienr {
			display: flex;
			align-items: center;
			flex-flow: column;
			padding: 0 88rpx;
			box-sizing: border-box;

			.form-wrap {
				margin-top: 112rpx;
				width: 100%;

				.forget-wrap {
					margin-top: 42rpx;
					text-align: center;
					height: 44rpx;
					font-size: 28rpx;
					color: #4E5969;
					line-height: 44rpx;
				}

				.button-wrap {
					.button {
						height: 80rpx;
						background: #1D2129;
						border-radius: 8rpx 8rpx 8rpx 8rpx;
						color: #FFF;
						font-size: 28rpx;
						color: #FFFFFF;

						&.loading {
							opacity: .8;
						}
					}
				}

				.form-item {
					width: 100%;
					padding-bottom: 18rpx;
					box-sizing: border-box;
					border-bottom: 1px solid #C9CDD4;
					margin-bottom: 34rpx;
					display: flex;
					align-items: center;

					.sms-btn {
						width: 144rpx;
						height: 56rpx;
						box-sizing: border-box;
						border-radius: 72rpx 72rpx 72rpx 72rpx;
						border: 2rpx solid #C9CDD4;
						display: flex;
						align-items: center;
						justify-content: center;

						.text {
							font-size: 20rpx;
							color: #86909C;
						}
					}

					.input {
						flex: 1;
						height: 50rpx;
						font-size: 30rpx;
						font-weight: 400;
						color: #86909C;
					}
				}
			}

			.app-logo {
				width: 248rpx;
				height: 248rpx;
				background: #D9D9D9;
				border-radius: 8rpx;
				display: flex;
				align-items: center;
				justify-content: center;

				.logo {
					width: 80%;
					height: 80%;
				}
			}
		}

		.footer-wrap {
			position: absolute;
			bottom: 48rpx;
			left: 50%;
			transform: translateX(-50%);
			display: flex;
			align-items: center;

			.sercice {
				height: 44rpx;
				font-size: 28rpx;
				color: #1D2129;
				line-height: 44rpx;
			}
		}
	}
</style>